<template>
  <div>
    <div class="task-item">
      <div class="lists">
        <div class="list" v-for="(item, index) in listData" :key="index">
          <div
            class="list-content"
            @mouseover.stop="changeIconMore(3, index)"
            @mouseleave.stop="changeIconMore(2, index)"
          >
            <div
              class="more-operation"
              @mouseover.stop="changeIconMore(1, index)"
              @mouseleave.stop="changeIconMore(2, index)"
            >
              <img :src="item.iconMoreShow" />
              <img
                :src="iconEditShow"
                @click="showModel(1, item)"
                @mouseover="iconEditShow = iconEditActive"
                @mouseleave="iconEditShow = iconEdit"
              />
              <img
                :src="iconDelShow"
                @click="showModel(2, item)"
                @mouseover="iconDelShow = iconDelActive"
                @mouseleave="iconDelShow = iconDel"
              />
              <img
                :src="iconFnShow"
                @click="showModel(3, item)"
                @mouseover="iconFnShow = iconFnActive"
                @mouseleave="iconFnShow = iconFn"
              />
            </div>
            <div class="shade"></div>
            <div class="top">
              <div class="key">任务名称</div>
              <div @click="gotaskDetail(item)" class="model-name fs24 text-overflow">
                {{ item.taskName }}
              </div>
            </div>
            <div class="mid">
              <div class="info-list">
                <div class="key">任务数量</div>
                <div class="val">{{ item.taskNum }}</div>
              </div>
            </div>
            <div class="bot">
              <div class="operation">
                <div class="key">任务状态</div>
                <div class="btn type1" v-if="item.sendStatus == 'N'" @click="taskIssuedhandle(item)">
									<img src="../assets/images/icon-down.png">
									<span>未下发</span>
								</div>
								<div class="btn type3" v-else @click="lookTask(item)">
									<img src="../assets/images/icon-search.png">
									<span>查看</span>
								</div>
              </div>
              <div class="operation">
                <div class="key">试验结果</div>
                <div class="btn type2" v-if="item.uploadStatus == 'N'">
									<img src="../assets/images/icon-file.png">
									<span>暂无</span>
								</div>
								<div class="btn type3" v-else @click="showTaskResultHandle(item)">
									<img src="../assets/images/icon-search.png">
									<span>查看</span>
								</div>
              </div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="add-model" @click="showModel(1)">
            <img src="../assets/images/icon-add-gray.png" />
            <span class="fs18 color505971">新增任务</span>
          </div>
        </div>
      </div>
      <div class="pagin" v-if="viewData">
        <!-- <div class="custom-btn" @click="currentChange(1)">首页</div>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="viewData.pageInfo.pageSize"
          :total="viewData.pageInfo.total"
          :page-count="viewData.pageInfo.pages"
          :current-page="viewData.pageInfo.pageNum"
          prev-text="上一页"
          next-text="下一页"
          @current-change="currentChange"
        ></el-pagination>
        <div class="custom-btn" @click="currentChange(viewData.pageInfo.pages)">尾页</div> -->
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="viewData.pageInfo.pageSize"
          :total="viewData.pageInfo.total"
          :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
          @size-change="sizeCurrentChange"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
    <TaskView v-if="showTaskView" :taskData="taskData" @cancel="cancelTaskView"></TaskView>
    <TaskIssued v-if="showTaskIssued" :taskData="taskData" @cancel="cancelTaskIssued"></TaskIssued>
    <TestResults v-if="showTestResults" :taskData="taskData" @cancel="cancelTestResults"></TestResults>
  </div>
</template>

<script>
import TaskView from '@/components/TaskView'
import TaskIssued from '@/components/TaskIssued'
import TestResults from '@/components/TestResults'
import Bus from "@/assets/js/bus.js"
export default {
  name: "TaskItem",
  props: {
    viewData: Object,
    listData: Array,
  },
  components: {TaskView, TaskIssued, TestResults},
  data() {
    return {
      iconMoreHover: require("../assets/images/icon-more-hover.png"),
      iconMoreActive: require("../assets/images/icon-more-active.png"),
      iconMore: require("../assets/images/icon-more.png"),
      iconEditShow: require("../assets/images/icon-edit.png"),
      iconEditActive: require("../assets/images/icon-edit-active.png"),
      iconEdit: require("../assets/images/icon-edit.png"),
      iconDelShow: require("../assets/images/icon-del.png"),
      iconDel: require("../assets/images/icon-del.png"),
      iconDelActive: require("../assets/images/icon-del-active.png"),
      iconFnShow: require("../assets/images/icon-set.png"),
      iconFn: require("../assets/images/icon-set.png"),
      iconFnActive: require("../assets/images/icon-set-active.png"),
      taskData: "", //任务数据
      showTaskView: false, //显示查看任务弹窗
      showTaskIssued: false, //显示任务下发弹窗
      showTestResults: false
    };
  },
  created() {
    let _this = this;
    Bus.$on('issued', (val) => {
      _this.taskIssuedhandle(val);
    });
  },
  methods: {
    //点击任务进入对应任务详情
    gotaskDetail(item){
      this.$store.commit('actModule', 0);
      this.$router.push({path:'/task',query:{taskName:item.taskName,taskId:item.id}})
    },
    /**
     * 鼠标移入移出更多按钮
     * @param {Number} type - 1移入 2移出
     * @param {Number} index - 操作数据下标
     */
    changeIconMore(type, index) {
      let temp = this.listData[index];
      if (type == 1) {
        temp.iconMoreShow = this.iconMoreActive;
      } else if (type == 2) {
        temp.iconMoreShow = this.iconMore;
      } else if (type == 3) {
        temp.iconMoreShow = this.iconMoreHover;
      }
      this.$set(this.listData, index, temp);
    },
    /**
     * 页数发生变化
     * @param {Number} e - 当前页数
     */
    currentChange(e) {
      this.$emit("pageQuery", e);
    },
    sizeCurrentChange(e) {
      this.$emit("pageSizeQuery", e)
    },
    /**
     * 显示新增/编辑弹窗
     * @param {Number} type - 1新增/编辑 2删除 3出厂编号
     * @param {Object} row - 操作数据
     */
    showModel(type, row) {
      this.$emit("showModel", type, row);
    },
    /**
     * 显示任务查看弹窗
     * @param {Object} row - 操作数据
     */
    lookTask(row) {
      this.taskData = row;
      this.showTaskView = true;
    },
    // 关闭查看任务弹窗
    cancelTaskView() {
      this.showTaskView = false;
    },
    /**
     * 导出试验报告
     * @param {Object} row - 操作数据
     */
    showTaskResultHandle(row) {
      this.taskData = row;
      this.showTestResults = true
    },
    cancelTestResults() {
      this.showTestResults = false
    },
    /**
     * 任务下发
     * @param {Object} row - 操作数据
     */
    taskIssuedhandle(row) {
      this.taskData = row;
      this.showTaskIssued = true;
    },
    // 关闭任务下发弹窗
    cancelTaskIssued() {
      this.showTaskIssued = false;
    },
  },
};
</script>

<style scoped lang='less'>
.task-item {
  width: 100%;
  padding: 0 .85rem;
  .lists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .list {
      width: 20%;
      height: 2.7rem;
      margin-top: .1rem;
      padding: 0 .15rem;
      .list-content {
        width: 100%;
        height: 100%;
        background: #f4f5f8;
        border: 1px solid #d0d6e3;
        border-radius: .03rem;
        position: relative;
        padding-top: .1rem;
        .more-operation {
          width: .3rem;
          height: .3rem;
          position: absolute;
          top: .1rem;
          right: .1rem;
          display: flex;
          flex-direction: column;
          z-index: 3;
          img {
            width: .3rem;
            height: .3rem;
            border-top: .02rem solid transparent;
            display: none;
            cursor: pointer;
          }
          img:first-child {
            border-top: 0;
            display: block;
          }
        }
        .more-operation:hover {
          img {
            display: block;
          }
        }
        .more-operation:hover + .shade {
          display: block;
        }
        .shade {
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          z-index: 2;
        }
        .key {
          font-size: .18rem;
          color: #505971;
        }
        .top {
          width: 100%;
          padding: 0 .26rem;
          .model-name {
            color: #285fe3;
            text-decoration: underline;
            cursor: pointer;
          }
        }
        .mid {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .info-list {
            width: 50%;
            padding-left: .26rem;
            margin-top: .03rem;
            .val {
              width: 100%;
              font-size: .24rem;
              color: #161d2e;
            }
          }
          .w40 {
            width: 40%;
          }
          .w60 {
            width: 60%;
          }
          .w100 {
            width: 100%;
          }
        }
        .bot {
          width: 100%;
          height: .84rem;
          border-top: 1px solid #d0d6e3;
          display: flex;
          position: absolute;
          bottom: 0;
          .operation {
            width: 50%;
            height: 100%;
            border-left: 1px solid #d0d6e3;
            padding-left: .26rem;
            padding-top: .05rem;
            .btn {
              width: 1rem;
              height: .34rem;
              background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
              border-radius: .03rem;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: .05rem;
              cursor: pointer;
              span {
                font-size: .18rem;
              }
            }
            .btn.type1 {
              border: 1px solid #316eff;
              img {
                width: .2rem;
                height: .2rem;
                margin-right: .06rem;
              }
              span {
                color: #285fe3;
              }
            }
            .btn.type2 {
              border: 1px solid #fb7831;
              img {
                width: .16rem;
                height: .20rem;
                margin-right: .1rem;
              }
              span {
                color: #ee5400;
              }
            }
            .btn.type3 {
              border: 1px solid #0ce392;
              img {
                width: .2rem;
                height: .2rem;
                margin-right: .06rem;
              }
              span {
                color: #00a65e;
              }
            }
          }
          .operation:first-child {
            border-left: 0;
          }
        }
      }
      .list-content:hover {
        border: 1px solid #316eff;
      }
      .add-model {
        width: 100%;
        height: 100%;
        background: #f4f5f8;
        border: 1px dashed #abb3c3;
        border-radius: .03rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        img {
          width: .23rem;
          height: .23rem;
          margin-bottom: .1rem;
        }
      }
    }
  }
  .pagin {
    width: 100%;
    height: 34px;
    margin: .14rem auto .11rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
    .custom-btn {
      width: 52px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
      color: #505971;
      font-family: "Microsoft YaHei";
      border: 1px solid #d0d6e3;
      font-size: 13px;
      margin-top: 2px;
      cursor: pointer;
    }
  }
}

// /deep/ .el-pagination.is-background .btn-prev {
//   width: 66px;
//   background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
//   color: #505971;
//   font-family: "Microsoft YaHei";
//   border: 1px solid #d0d6e3;
// }
// /deep/ .el-pagination.is-background .btn-next {
//   width: 66px;
//   background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
//   color: #505971;
//   font-family: "Microsoft YaHei";
//   border: 1px solid #d0d6e3;
// }
// /deep/ .el-pagination.is-background .el-pager li {
//   background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
//   font-weight: 400;
//   color: #505971;
//   font-family: "Microsoft YaHei";
//   border: 1px solid #d0d6e3;
// }
// /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
//   background: #409eff;
// }
</style>